<!--
 * @Description: form搜索过滤组件
 * @Author: hejianbo
 * @Date: 2022-01-12 15:43:15
 * @FilePath: /src/views/components/coms/mt-form-search/index.vue
-->
<template>
  <el-form :inline="fStyle.inline" :size="fStyle.size">
    <template v-for="item in configData">
      <el-form-item
        v-show="!item.hidden"
        :label="item.labelHidden || item.tag == 'el-button' ? '' : item.label"
        :key="item.label"
        :required="item.required"
      >
        <template v-if="item.tag == 'el-select'">
          <el-select v-model="formData[item.prop]" :placeholder="item.placeholder" :clearable="item.clearable" :class="[fStyle.selectClassName || '']">
            <el-option
              v-for="{ label, value } in item.options"
              :key="label"
              :label="label"
              :value="Number(value) === 0 ? value : (value || label)"
            ></el-option>
          </el-select>
        </template>

        <template v-else-if="item.tag == 'el-input'">
          <el-input
            v-model="formData[item.prop]"
            :placeholder="item.placeholder"
            :clearable="item.clearable"
            :class="[fStyle.inputClassName || '']"
          ></el-input>
        </template>

        <template v-else-if="item.tag == 'el-date-picker'">
          <el-date-picker
            v-model="formData[item.prop]"
            size="small"
            style="width: 240px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :clearable="item.clearable"
          >
          </el-date-picker>
        </template>
        <template v-else-if="item.tag == 'el-date-day'">
          <el-date-picker
            v-model="formData[item.prop]"
            size="small"
            style="width: 140px"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期"
            :clearable="item.clearable"
          >
          </el-date-picker>
        </template>

        <template v-else-if="item.tag == 'el-button'">
          <el-button 
            v-show="item.showFn ? item.showFn() : true"
            :plain="item.type == 'plain'"
            :type="item.type || 'primary'" 
            :icon="item.icon"
            @click="item.handle(formData)"
            :disabled="item.disable ? item.disable() : false"
          >
          {{ item.label }}
          </el-button>
        </template>

        <!-- 绑定中文名 -->
        <!-- <template v-else-if="item.tag == 'mt-label'">
          <template v-if="item.isLabel">
            <MtLabel ref="labelSelect" :label.sync="formData[item.prop]"></MtLabel>
          </template>
          <template v-else>
            <MtLabel ref="labelSelect" v-model="formData[item.prop]"></MtLabel>
          </template>
        </template> -->
      </el-form-item>
    </template>

    <slot :formData="formData" :validateFn="validateFn"></slot>
  </el-form>
</template>

<script>
// import MtLabel from "@/views/components/LabelSelect";

/**
 * slot作用域插槽同时传出
 * formData
 * validateFn 返回promise默认校验是否必填
 */

// 表单默认样式
const defaultFormStyle = {
  inline: true,
  size: 'medium',
};
export default {
  name: 'mt-form-search',
  components: {
    // MtLabel,
  },
  props: {
    // 需要初始化的表单数据（回显）
    model: {
      type: Object,
      default() {
        return {};
      },
    },
    // 配置数据（同时也决定了最终传递出来的form数据）
    configData: {
      type: Array,
      required: true,
    },
    // 表单样式
    formStyle: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data({ model, formStyle }) {
    this.fStyle = { ...defaultFormStyle, ...formStyle };

    return {
      formData: { ...model },
    };
  },
  created() {},
  mounted() {},
  watch: {
    formData: {
      handler(v) {
        this.$emit('change', v)
      },
      deep: true,
    },
    model(v) {
      this.formData = {...v};
    },
  },
  computed: {},
  methods: {
    clearMtLabel() {
      const doms = this.$refs.labelSelect
      if (doms && doms[0]) {
        doms[0].label = []
      }
    },
    validateFn() {
      const { configData, formData } = this;

      return new Promise((resolve, reject) => {
        const errorItem = configData.find(({ required, prop, label }) => {
          if (required && !formData[prop]) {
            return true;
          }
        });

        if (errorItem) {
          reject({
            formData,
            defaultError: this.$message.error.bind(this.$message, `${errorItem.label}不能为空`),
          });
        } else {
          resolve(formData);
        }
      });
    },
  },
};
</script>
<style></style>
